//--map--
.text-height(@h){
    height: @h; line-height: @h;
}
.text-ellipsis{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.clearfix{
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
        // Fixes Opera/contenteditable bug:
        // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
        line-height: 0;
    }
    &:after {
        clear: both;
    }
}

.box-sizing{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.background-rgba(@red, @green, @blue, @alpha:1){
    @filtercolor:`(_f = function(d){ var v = (parseInt(d)|0).toString(16);return v.length<2 ? "0"+v : v;},'#'+_f(@{alpha}*255) + _f(@{red}) + _f(@{green})+ _f(@{blue}))`;
    background-color: ~'rgba(@{red},@{green},@{blue},@{alpha})';
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@{filtercolor}',endColorstr='@{filtercolor}');
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@{filtercolor}',endColorstr='@{filtercolor}');
}

.opacity(@opacity: 80) {
    opacity: @opacity / 100;
    filter: ~"alpha(opacity=@{opacity})";
}

//线性渐变
.linear-y(@start-color, @end-color, @start-percent: 0%, @end-percent: 100%){
    background-color: @start-color;
    background-image: -webkit-gradient(linear, @start-percent top, @end-percent bottom, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
    background-image:  linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
    //&:hover{ background-color: @start-color; background-position: 0 100px;}
    //&:active{ background-color: @end-color; background-position: 0 100px;}
}

.transition(@str: all .5s ease){
    transition: @str;
    /* Firefox 4 */
    -moz-transition:@str;
    /* Safari and Chrome */
    -webkit-transition:@str;
    /* Opera */
    -o-transition:@str;
}

html{
    padding: 0; margin: 0;
    height: 100%;
}

body{
    font-family:'微软雅黑','HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0; padding:0;
    background-color: #FFFFFF;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #959595;
}

::-ms-clear, ::-ms-reveal{display: none;}

html *{
    -webkit-tap-highlight-color: transparent;
}

//头部导航
.m-nav1{
    position: fixed; top: 0; left: 0;
    width: 200px;
    max-height: 100%;
    overflow: auto;
    color: #FFFFFF; background-color: #D1D1D1;
    .li1{
        .text-height(34px);
        .transition();
        font-size: 14px;
        color: #FFFFFF; text-align: right; padding-right: 16px;
        background-color: #053141;
        display: block; position: relative;
        text-decoration: none;
        &:hover{
            opacity: .5;
        }
        &:nth-child(2n - 1){
            background-color: #083a5c;
        }
        &:first-child{
            .text-height(40px);
            background-color: #F37B1D;
        }
    }
    .back:before{
        position: absolute; width: 30px; text-align: center;
        content: '<'; z-index: 2; left: 0; top: 0;
        font-family: sans-serif; font-size: 20px;
    }
}

.m-context1{
    margin-left: 200px;
}

.m-code{
    padding-left: 30px;
    ul{
        padding: 0; margin: 0 0 20px 16px; display: block;
        color: #F37B1D;
        li{
            padding: 0; margin: 0 0 4px 3px;
            list-style-type: square; color: #333333;
        }
    }
    h2,h3{
        font-size: 24px;
    }
    h1, h2, h3 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: normal;
    }

    code {
        padding: 2px 4px;
        font-size: 90%;
        color: #c7254e;
        background-color: #f9f2f4;
        white-space: nowrap;
        border-radius: 2px;
    }

    p {
        margin: 0 0 10px 3px;
    }
    p.x1{
        border-left: 3px solid #bce8f1;
        //background-color: #f4f8fa;
        padding: 4px 8px;
        margin-left: 0;
    }
    pre {
        display: block;
        padding: 9.5px;
        margin: 0 0 10px;
        font-size: 13px;
        line-height: 1.428571429;
        word-break: break-all;
        word-wrap: break-word;
        color: #333333;
        background-color: #f5f5f5;
        border: 1px solid #cccccc;
        border-radius: 4px;
        code {
            padding: 0;
            font-size: inherit;
            color: inherit;
            white-space: pre-wrap;
            background-color: transparent;
            border-radius: 0;
        }
    }

    .bs-docs-section{
        margin-bottom: 50px;
    }

    .page-header{
        //padding-bottom: 9px;
        margin: 20px 0 20px;
        border-bottom: 1px solid #eeeeee;
    }
    .highlight {
        padding: 8px;
        margin-bottom: 14px;
        background-color: #f7f7f9;
        border-left: 3px solid #C7254E;
        pre {
            padding: 0;
            margin-top: 0;
            margin-bottom: 0;
            background-color: transparent;
            border: 0;
            white-space: nowrap;
            code {
                font-size: inherit;
                color: #333;
                background-color: transparent;
            }
        }
    }
    .bs-callout {
        margin: 8px 0;
        padding: 8px;
        border-left: 3px solid #eee;
    }
    .bs-callout-info {
        background-color: #f4f8fa;
        border-color: #bce8f1;
    }
}